import React, { useEffect, useRef } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';

interface propsInter {
  address: string;
  handlePassData: (data: any) => any;
  isEdit: boolean;
  lnArr: number[];
  isView?: boolean;
}
export default function Map(props: propsInter) {
  const MapRef = useRef<any>({});
  // 初始化地图
  async function initMap() {
    const AMap = await AMapLoader.load({
      key: 'e5c7886a9d2653aa5e8730c266feefe2', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        version: '1.1',
        plugins: ['misc/PositionPicker'],
      },
    });
    // 根据传入的值来定位
    const nowCenter =
      props.lnArr.length === 0 ? [106.595706, 29.423058] : props.lnArr;
    // 新增map实例
    const map = new AMap.Map('map-container', {
      //设置地图容器id
      viewMode: '3D', //是否为3D地图模式
      zoom: 17, //初始化地图级别
      center: nowCenter, //初始化地图中心点位置
    });
    MapRef.current.map = map;
    // 使用geocoder  将地址转化为经纬度
    MapRef.current.geocoder = new AMap.Geocoder();
    // 新增了在查看的时候，点标记不能被拖动
    if (!props.isView) {
      // 使用a map ui里的PositionPicker组件，完成地图选点操作
      const positionPicker = new AMapUI.PositionPicker({
        mode: 'dragMap',
        map: map,
      });
      // 当选点成功以后，触发该方法 选到经纬度
      positionPicker.on('success', (res: any) => {
        console.log(res);
        const { lng, lat } = res.position;
        props.handlePassData({ lng, lat });
      });
      positionPicker.start();
    } else {
      const marker = new AMap.Marker();
      marker.setPosition(nowCenter);
      map.add(marker);
    }
  }
  // 通过地址  获取经纬度
  function getCode(address: string) {
    const { geocoder, map } = MapRef.current;
    geocoder.getLocation(address, function (status: any, result: any) {
      if (status === 'complete' && result.info === 'OK') {
        const { location } = result.geocodes[0];
        // 拿到经纬度后，地图跳转到对应经纬度
        console.log(location);
        map.panTo(location);
      }
    });
  }
  useEffect(() => {
    // 设置security code  不设置则不能使用geocoder和PositionPicker的经纬度获取功能
    window._AMapSecurityConfig = {
      securityJsCode: 'd28f5e83b4cc1c14996a57a78dfcf109',
    };
    if (props.isEdit) {
      props.lnArr.length === 2 && initMap();
    } else {
      initMap();
    }
  }, [props.isEdit, props.lnArr]);

  //todo 好好理解这部分逻辑
  const getCodeOnAddressChange = () => {
    if (props.address) {
      return;
    }
    if (MapRef.current.map) {
      props.address && getCode(props.address);
    } else {
      setTimeout(() => {
        getCodeOnAddressChange();
      }, 200);
    }
  };

  useEffect(() => {
    getCodeOnAddressChange();
    console.log('变化了');
    // if (props.address) {
    //     getCode(props.address)
    // }
  }, [props.address]);
  return (
    <div id="map-container" style={{ height: '100%', width: '100%' }}></div>
  );
}
